<template>
<div class="QTOP">
  <el-page-header @back="goBack" style="float:left;"></el-page-header>
  <div class="top-item">
    <span>{{seeWard}}</span>
    <i class="el-icon-star-off" @click="collect($event)"></i>
    <el-dropdown>
      <span class="el-dropdown-link" id="item-more">
        <i class="el-icon-more"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><i class="el-icon-paperclip"></i>复制链接</el-dropdown-item>
        <el-dropdown-item><i class="el-icon-message"></i>私信题主</el-dropdown-item>
        <el-dropdown-item><i class="el-icon-s-promotion"></i>转发其他</el-dropdown-item>
        <el-dropdown-item><i class="el-icon-s-custom"></i>邀请回答</el-dropdown-item>
        <el-dropdown-item><i class="el-icon-pie-chart"></i>夜间模式</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      seeWard: '查看衣柜',
      isCollect: false
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    collect (event) {
      if (this.isCollect === false) {
        event.currentTarget.classList.remove('el-icon-star-off')
        event.currentTarget.classList.add('el-icon-star-on')
        this.isCollect = true
      } else {
        event.currentTarget.classList.remove('el-icon-star-on')
        event.currentTarget.classList.add('el-icon-star-off')
        this.isCollect = false
      }
    }
  }
}
</script>
<style lang='scss'>
.QTOP {
  font-family: 微软雅黑;
  font-weight: bold;
  font-size: 16px;
  color:#E9BD7A;
  width: 100%;
  margin-top: 10px;
  div {
    margin-top: 1px;
  }
  .top-item {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    span {
      margin-top: 8px;
      margin-right: 20px;
      border: 2px solid #E9BD7A;
      padding: 5px;
      border-radius: 20px;
    }
    i {
      font-size: 20px;
      margin-right: 10px;
    }
    #item-more {
      i {
        transform: rotate(90deg);
        margin-right: -16px;
        color: #E9BD7A;
      }
      border: none;
    }
  }
}
</style>
